<template>
  <div class="week-checkbox-group">
    <a-form-item name="weekArr">
      <a-checkbox-group v-model:value="_value" class="flex justify-between">
        <a-checkbox :value="item.value" v-for="item in checkboxGroup" :key="item.value">{{ item.label }}</a-checkbox>
      </a-checkbox-group>
    </a-form-item>
  </div>
</template>

<script lang="ts" setup name="WeekCheckboxGroup">
import { computed, reactive, toRefs } from 'vue'

// props
type NewValueType = string[]
type Props = { newValue: NewValueType }
const props = defineProps<Props>()
const { newValue } = toRefs(props)

// v-model:newValue
const emit = defineEmits<{
  (e: 'update:newValue', val: NewValueType): void
}>()
const _value = computed({
  get: () => {
    return newValue.value
  },
  set: (val: NewValueType) => {
    emit('update:newValue', val)
  }
})

type CheckboxGroupType = { label: string; value: string }[]
const checkboxGroup = reactive<CheckboxGroupType>([
  {
    label: '周一',
    value: '1'
  },
  {
    label: '周二',
    value: '2'
  },
  {
    label: '周三',
    value: '3'
  },
  {
    label: '周四',
    value: '4'
  },
  {
    label: '周五',
    value: '5'
  },
  {
    label: '周六',
    value: '6'
  },
  {
    label: '周日',
    value: '7'
  }
])
</script>

<style lang="less" scoped>
.week-checkbox-group {
  width: 567px;
  margin-top: 15px;
  padding: 0px 18px;
  background-color: #f7f7f7;

  .ant-form-item {
    margin-bottom: 0px;
  }
}
</style>
